.unbox-setting {
  margin: -16px -20px 0 -20px;
  height: calc(100vh - 50px);
  overflow-y: scroll;
  position: relative;
  scroll-behavior: smooth; //部分浏览器支持

  .head-box {
    width: 100%;
    padding: 0 40px;
    position: relative;
    .title {
      font-weight: 500;
      font-size: 40px;
      color: #FFFFFF;
      line-height: 54px;
      padding-top: 70px;
      //padding-left: 40px;
    }
    .desc {
      font-size: 20px;
      color: #FFFFFF;
      line-height: 32px;
      //padding-left: 40px;
      padding-bottom: 98px;
    }
    .navigation-box {
      transition: width,background-color,height ease 0.2s;
      top: 178px;
      position: absolute;
      height: 56px;
      border-radius: 4px;
      background-color: rgba(0,0,0, 0.25);

      .single-nav {
        display: inline-block;
        padding: 0 30px;

        .nav-title {
          transition: all ease 0.2s;
          font-size: 16px;
          color: #FFFFFF;
          text-align: center;
          line-height: 56px;

          &.active {
            transition: all ease 0.2s;
            font-weight: 500;
            font-size: 20px;
            line-height: 52px;
            border-bottom: 3px solid #1F70FC;
          }
        }
      }

      &.show-bar {
        padding: 0 40px;
        z-index: 5;
        border-radius: 0;
        top: 50px;
        right: 0;
        height: 64px;
        position: fixed;
        background-color: #FFF;
        box-shadow: 0 4px 12px 0 rgba(0,0,0, 0.10);
        .single-nav {

          .nav-title {
            color: #1E2126;
            line-height: 56px;

            &.active {
              line-height: 56px;
              border-bottom: 3px solid #4B8DFF;
            }
          }
        }
        &.un-collapse-width {
          width: calc(100% - 200px);
        }
        &.collapse-width {
          width: calc(100% - 64px);
        }
      }
    }
    .setting-one {
      background: #FFFFFF;
      box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
      border-radius: 4px;
      padding: 40px 30px;

      .step-one-box {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        margin-bottom: -15px;
        margin-right: -15px;

        .single-box {
          cursor: pointer;
          user-select: auto;
          transition: all ease 0.2s;
          padding: 16px;
          height: 160px;
          width: 208px;
          background: #FFFFFF;
          border: 1px solid #CDD7EC;
          border-radius: 4px;
          margin-right: 15px;
          margin-bottom: 15px;
          position: relative;

          .single-title {
            font-weight: 500;
            font-size: 16px;
            color: #000000;
            line-height: 24px;
            margin-bottom: 4px;
          }
          .single-desc {
            font-size: 14px;
            color: #4E5B71;
            line-height: 20px;
          }
          .operation-area {
            position: absolute;
            bottom: 16px;
            left: 16px;
            .ant-btn-primary {
              border-radius: 2px;
              font-weight: 500;
              &:hover {
                background-color: #1F70FC;
                font-weight: 400;
              }
            }
          }
          .tag {
            position: absolute;
            bottom: 16px;
            right: 16px;

            .tag-done, .tag-sync-with-ding-talk {
              height: 22px;
              background: #EDF5FF;
              font-size: 12px;
              color: #4B8DFF;
              line-height: 22px;
              padding: 0 6px;
            }
            .tag-img {
              user-select: none;
              margin: -2px 2px 0 0;
              width: 12px;
              height: 12px;
            }
          }

          &:hover {
            border: 1px solid #4B8DFF;
            box-shadow: 0 4px 12px 0 rgba(75,141,255,0.50);
            border-radius: 4px;
          }
        }
      }
    }
    .unbox-background-img {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-color: rgba(34,63,100,0.85);
      width: 100%;
      height: 500px;
    }
    .unbox-head-box-content {
      position: relative;
      z-index: 1;
    }
  }

  .main-info-flex-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 32px;

    .info-left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;

      .step-number {
        margin-right: 8px;

        .number-img {
          user-select: none;
          width: 36px;
          height: 48px;
        }
      }
      .step-title-wrapper {
        .step-title {
          font-weight: 500;
          font-size: 20px;
          color: #000000;
          line-height: 28px;
        }
        .step-desc {
          font-size: 14px;
          color: #4E5B71;
          line-height: 20px;
        }
      }
      .lets-start {
        align-self: flex-end;
        font-weight: 500;
        cursor: pointer;
        font-size: 14px;
        color: #1F70FC;
        line-height: 20px;
        margin-left: 20px;
      }
    }

    .step-right {
      min-width: 300px;

      .step-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .step-title {
          padding-right: 30px;
          font-size: 14px;
          color: #4E5B71;
          line-height: 20px;
        }
        .one-in-all {
          flex-shrink: 0;
          transition: all ease 0.2s;
          font-weight: 500;
          font-size: 20px;
          color: #B5C0CE;
          text-align: right;
          line-height: 20px;

          &.blue-style {
            color: #1F70FC;
          }
        }
      }
      .ant-progress-line .ant-progress-outer .ant-progress-inner {
        background-color: #EBF0F5;
        .ant-progress-bg {
          background-color: #4B8DFF;
        }
      }
    }

    .contact-right {
      text-align: right;
      flex-shrink: 0;
      .first-line {
        .desc {
          font-size: 14px;
          color: #4E5B71;
          letter-spacing: 0;
          line-height: 24px;
          text-align: right;
        }
        .phone-num-a {
          margin-left: 7px;
          font-weight: 500;
          font-size: 16px;
          color: #1F70FC;
          letter-spacing: 0;
          text-align: right;
          line-height: 24px;
          &:hover {
            text-decoration: none;
          }
          &:active {
            text-decoration: none;
          }
          &:focus {
            text-decoration: none;
          }
          &:visited {
            text-decoration: none;
          }
        }
      }
      .second-line {
        .sub-text {
          font-size: 12px;
          color: #848C95;
          letter-spacing: 0;
          line-height: 16px;
        }
      }
    }
  }

  .other-box {
    margin-top: 20px;
    padding: 0 40px;
    .setting-two {
      background: #FFFFFF;
      //box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
      //border-radius: 4px;
      padding: 40px 30px 0 30px;

      .step-two-box {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        margin-bottom: -20px;
        margin-right: -20px;

        .single-box {
          transition: all ease 0.2s;
          padding: 16px;
          height: 160px;
          width: 260px;
          background: #FFFFFF;
          border: 1px solid #CDD7EC;
          border-radius: 4px;
          margin-right: 20px;
          margin-bottom: 20px;
          position: relative;
          cursor: pointer;

          .single-title {
            font-weight: 500;
            font-size: 16px;
            color: #000000;
            line-height: 24px;
            margin-bottom: 4px;
          }
          .single-desc {
            font-size: 14px;
            color: #4E5B71;
            line-height: 20px;
          }
          .operation-area {
            position: absolute;
            bottom: 16px;
            left: 16px;
            .ant-btn-primary {
              border-radius: 2px;
              font-weight: 500;
              &:hover {
                background-color: #1F70FC;
                font-weight: 400;
              }
            }
          }
          .tag {
            position: absolute;
            bottom: 16px;
            right: 16px;

            .tag-done, .tag-sync-with-ding-talk, .tag-bought  {
              height: 22px;
              background: #EDF5FF;
              font-size: 12px;
              color: #4B8DFF;
              line-height: 22px;
              padding: 0 6px;
            }
            .tag-free-trial {
              height: 22px;
              background: #FFF5F0;
              font-size: 12px;
              color: #FF7110;
              line-height: 22px;
              padding: 0 6px;
            }
            .tag-bought-not {
              height: 22px;
              background: #F7F8FA;
              font-size: 12px;
              color: #B5C0CE;
              line-height: 22px;
              padding: 0 6px;
            }
            .tag-img {
              user-select: none;
              margin: -2px 2px 0 0;
              width: 12px;
              height: 12px;
            }
          }

          &:hover {
            border: 1px solid #4B8DFF;
            box-shadow: 0 4px 12px 0 rgba(75,141,255,0.50);
            border-radius: 4px;
          }
        }
      }
    }
    .setting-three {
      background: #FFFFFF;
      padding: 40px 30px 60px 30px;
      .step-three-box {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        margin-bottom: -20px;
        margin-right: -20px;

        .single-box {
          transition: all ease 0.2s;
          padding: 16px;
          height: 160px;
          width: 260px;
          background: #FFFFFF;
          border: 1px solid #CDD7EC;
          border-radius: 4px;
          margin-right: 20px;
          margin-bottom: 20px;
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;

          .img-box {
            width: 40px;
            height: 40px;
            margin-right: 12px;
            flex-shrink: 0;
            background-color: #eee;
            border-radius: 20px;
            overflow: hidden;

            .advance-img {
              user-select: none;
              width: 40px;
              height: 40px;
            }
          }

          .info-box {
            .single-title {
              font-weight: 500;
              font-size: 16px;
              color: #000000;
              line-height: 24px;
              margin-bottom: 4px;

              &.en {
                font-size: 14px;
                line-height: 20px;
              }
            }
            .single-desc {
              font-size: 14px;
              color: #98989F;
              line-height: 20px;

              &.en {
                font-size: 12px;
                line-height: 16px;
              }
            }
          }

          &.hover {
            &:hover {
              cursor: pointer;
              border: 1px solid #4B8DFF;
              box-shadow: 0 4px 12px 0 rgba(75,141,255,0.50);
              border-radius: 4px;
            }
          }
        }
      }
    }
  }

}

//@media screen and (max-width: 1454px) {
//  .unbox-setting {
//    .head-box {
//      margin-bottom: 249px;
//    }
//  }
//}
